import style from './index.module.scss'
import React, { useEffect, useState } from 'react'
import { Input, Switch, message, Select, Row, Col, Radio  } from 'antd';
import { useDispatch, useSelector } from 'react-redux'
import { Link } from "react-router-dom"
import { Demo } from '../../../components/Customer/TableComponent'
import { ManagementAsync, getIdAction, SpecificQueryAsync, GradeSortListAsync, MoneySortListAsync, OrderSortListAsync, TimeSortListAsync } from '../../../store/customerStore/action'
// import { SearchComponent } from '../../../components/Customer/Search';
// import { Radio } from 'antd';

export default function BorrowingCapacity() {
    const dateHead = [
        {
            id: 1,
            name: '最近借款：',
            children: [{ value: '不限', label: '不限' }
                , { value: '1周内', label: '1周内' }
                , { value: '2周内', label: '2周内' }
                , { value: '1个月内', label: '1个月内' }
                , { value: '1个月前', label: '1个月前' }
                , { value: '2个月前', label: '2个月前' }
                , { value: '3个月前', label: '3个月前' }
                , { value: '6个月前', label: '6个月前' }
                , { value: '自定义', label: '自定义' }],
            key: "recently"
        },
        {
            id: 2,
            name: "借款次数：",
            children: [{ value: '不限', label: '不限' }
                , { value: 1, label: '1次+' }
                , { value: 2, label: '2次+' }
                , { value: 3, label: '3次+' }
                , { value: 4, label: '4次+' }
                , { value: 10, label: '10次+' }
                , { value: 20, label: '20次+' }
                , { value: 30, label: '30次+' }
                , { value: '自定义', label: '自定义' }],
            key: "number"
        },
        {
            id: 3,
            name: "借款金额：",
            children: [{ value: '不限', label: '不限' }
                , { value: '0-5000', label: '0-5000' }
                , { value: '5001-10000', label: '5001-10000' }
                , { value: '1-3万', label: '1-3万' }
                , { value: '3-5万', label: '3-5万' }
                , { value: '5-10万', label: '5-10万' }
                , { value: '10-30万', label: '10-30万' }
                , { value: '30-100万', label: '30-100万' }
                , { value: '自定义', label: '自定义' }],
            key: "money"
        },
        {
            id: 4,
            name: "贷款用途：",
            children: [{ value: '不限', label: '不限' }
                , { value: '日常生活消费', label: '日常生活消费' }
                , { value: '提高生活质量', label: '提高生活质量' }
                , { value: '购物', label: '购物' }
                , { value: '教育支出', label: '教育支出' }
                , { value: '医疗', label: '医疗' }
                , { value: '保险', label: '保险' }
                , { value: '资金周转', label: '资金周转' }
                , { value: '自定义', label: '自定义' }],
            key: "used"
        },
        {
            id: 5,
            name: "用户标签：",
            children: [{ value: '不限', label: '不限' }, { value: '优质用户', label: '优质用户' }, { value: '老赖', label: '老赖' }],
            key: "label"
        },
    ]
    // const onChange3 = e => {
    //     console.log('radio3 checked', e.target.value);
    //     // this.setState({
    //     //     value3: e.target.value,
    //     // });
    // };
    const headChange = {
        recently: (e) => {
            console.log('radio3', e.target.value);
        },
        number: (e) => {
            console.log('radio3', e.target.value);
        },
        money: (e) => {
            console.log('radio3', e.target.value);
        },
        used: (e) => {
            console.log('radio3', e.target.value);
        },
        label: (e) => {
            console.log('radio3', e.target.value);
        }
    }

    // const childrenList = (list) => {
    //     const newList = list.map((item, index) => {
    //         return <li className={style.ListItem} key={item.id}>
    //             <button className={style.btn} onClick={getInfo}>{item.name}</button>
    //         </li>
    //     })
    //     return newList
    // }

    const obj = {
        id: 12313,
        name: "王娇娇",
        age: 10086,
        home: "no",
        sex: 0,
        money: 2000,
    }

    // const getInfo = (e) => {
    //     console.log(e.target.innerHTML);
    // }

    const list = dateHead.map((item) => {
        return <Row key={item.id}>
            <Col span={2}>{item.name}</Col>
            <Col span={22}>
                <div className={style.list}>
                    <Radio.Group
                        options={item.children}
                        onChange={headChange[item.key]}
                        // value={value3}
                        optionType="button"
                    />
                </div>
            </Col>
        </Row>
    })


    const dispatch = useDispatch()

    const thisId = useSelector((state) => state.customer.id)
    const [thisData, setThisData] = useState([])

    const newData = useSelector((state) => [...state.customer.data])
    const count = useSelector((state) => state.customer.count)
    const pageSize = useSelector((state) => state.customer.pageSize)
    const current = useSelector((state) => state.customer.current)

    console.log(pageSize);
    console.log(current);

    useEffect(() => {
        // 获取列表数据
        dispatch(ManagementAsync({
            currentPage: current,
            pageSize: pageSize
        }))
            .then(res => {
                console.log(res)
                // setThisData(useSelector((state) => state.customer.obj))
                message.success('获取成功')
            })
            .catch(err => {
                console.log(err)
                message.error(err.errMsg)
            })
    }, [current, pageSize])

    useEffect(() => {
        console.log(newData);

        const data = newData.map(item => {
            item.key = item.id
            item.state = (item.state == '1') ? <Switch defaultChecked disabled /> : <Switch defaultChecked={false} disabled />
            return item
        })
        setThisData(data)
        console.log(thisData);
        console.log(count);
    }, [newData.length])


    // useEffect(()=>{
    //     console.log(thisData.length);
    // },[thisData.length])

    function onChange(checked) {
        console.log(`switch to ${checked}`);
    }

    //搜索内容
    // let searchObj = {
    //     phone: '',
    //     name: '',
    //     time: ''
    // }
    // const onChange1 = (e) => {
    //     searchObj.phone = e.target.value
    // }
    // const onChange2 = (e) => {
    //     searchObj.name = e.target.value
    // }
    // const onChange3 = (date, dateString) => {
    //     console.log(dateString);
    //     searchObj.time = dateString
    // }

    // 搜索
    // const Search = (searchObj) => {
    //     console.log('搜索');
    //     console.log(searchObj);
    //     dispatch(SpecificQueryAsync({
    //         currentPage: current,
    //         pageSize: pageSize,
    //         userObj: {
    //             id: searchObj.id || null,
    //             member_grade_id: searchObj.member_grade_id || null,
    //             name: searchObj.name || null,
    //             registration_time: searchObj.registration_time || null
    //         }
    //     }))
    //         .then(res => {
    //             console.log(res)
    //             // setThisData(useSelector((state) => state.customer.obj))
    //             message.success('查找成功')
    //         })
    //         .catch(err => {
    //             console.log(err)
    //             message.error(err.errMsg)
    //         })

    // }

    // 跳转时获取id
    const getID = (e) => {
        console.log('as', e.target.dataset.id);
        dispatch(getIdAction(e.target.dataset.id))
        console.log('修改了', thisId);
        // this.props.history.push('/child02')
    }

    // 表头
    const Columns = [
        {
            title: '用户ID',
            dataIndex: 'id',
            align: 'center',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '用户手机号',
            dataIndex: 'phone',
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '用户姓名',
            dataIndex: 'name',
            ellipsis: true,
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '会员等级',
            dataIndex: 'position',
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '贷款金额',
            dataIndex: 'applied_amount',
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '贷款笔数',
            dataIndex: 'total',
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '剩余待还',
            align: 'center',
            dataIndex: 'payback_rest',
            render: (text) => <>{text}</>,
        },
        {
            title: '账户启用状态',
            dataIndex: 'state',
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '操作',
            dataIndex: 'id',
            align: 'center',
            render: (text) => {
                return <Link to='/home/customer/information' data-id={text} onClick={(e) => getID(e)}>查看</Link>
            }

        },
    ];

    // 列表内容
    const DataList = [
        {
            key: '1',
            id: 1,
            phone: 32,
            name: 'John Brown',
            applied_amount: '2000',
            payback_rest: '1000',
            state: '1',
            total: '10',
            address: 'New York No. 1 Lake Parkasdadassadasdsadasdasdasdasdasdasdasd阿大神大神大神大所大所大所大所大所大所大所·1',
            position: '成都'
        },
        {
            key: '2',
            id: 2,
            phone: 32,
            name: 'John Brown',
            applied_amount: '2000',
            payback_rest: '1000',
            state: '1',
            total: '10',
            address: 'New York No. 1 Lake Parkasdadassadasdsadasdasdasdasdasdasdasd阿大神大神大神大所大所大所大所大所大所大所·1',
            position: '成都'
        },
        {
            key: '3',
            id: 3,
            phone: 32,
            name: 'John Brown',
            applied_amount: '2000',
            payback_rest: '1000',
            state: '1',
            total: '10',
            address: 'New York No. 1 Lake Parkasdadassadasdsadasdasdasdasdasdasdasd阿大神大神大神大所大所大所大所大所大所大所·1',
            position: '成都'
        },
        {
            key: '4',
            name: 'Disabled User',
            age: 99,
            id: 10086,
            address: 'Sidney No. 1 Lake Park',
            position: '成都',
            // state: <><Link to='/home/customer/Information' className=''>查看</Link>
            //     <Link to='/home/customer/Information'>删除</Link></>
            state: '状态'

        },
        {
            key: '5',
            id: 5,
            phone: 32,
            name: 'John Brown',
            applied_amount: '2000',
            payback_rest: '1000',
            state: '1',
            total: '10',
            address: 'New York No. 1 Lake Parkasdadassadasdsadasdasdasdasdasdasdasd阿大神大神大神大所大所大所大所大所大所大所·1',
            position: '成都'
        },
        {
            key: '6',
            id: 6,
            phone: 32,
            name: 'John Brown',
            applied_amount: '2000',
            payback_rest: '1000',
            state: '1',
            total: '10',
            address: 'New York No. 1 Lake Parkasdadassadasdsadasdasdasdasdasdasdasd阿大神大神大神大所大所大所大所大所大所大所·1',
            position: '成都'
        },
        {
            key: '7',
            id: 7,
            phone: 32,
            name: 'John Brown',
            applied_amount: '2000',
            payback_rest: '1000',
            state: '1',
            total: '10',
            address: 'New York No. 1 Lake Parkasdadassadasdsadasdasdasdasdasdasdasd阿大神大神大神大所大所大所大所大所大所大所·1',
            position: '成都'
        },
        {
            key: '8',
            id: 8,
            phone: 32,
            name: 'John Brown',
            applied_amount: '2000',
            payback_rest: '1000',
            state: '1',
            total: '10',
            address: 'New York No. 1 Lake Parkasdadassadasdsadasdasdasdasdasdasdasd阿大神大神大神大所大所大所大所大所大所大所·1',
            position: '成都'
        },
        {
            key: '9',
            id: 9,
            phone: 32,
            name: 'John Brown',
            applied_amount: '2000',
            payback_rest: '1000',
            state: '1',
            total: '10',
            address: 'New York No. 1 Lake Parkasdadassadasdsadasdasdasdasdasdasdasd阿大神大神大神大所大所大所大所大所大所大所·1',
            position: '成都'
        },
        {
            key: '10',
            id: 10,
            phone: 32,
            name: 'John Brown',
            applied_amount: '2000',
            payback_rest: '1000',
            state: '1',
            total: '10',
            address: 'New York No. 1 Lake Parkasdadassadasdsadasdasdasdasdasdasdasd阿大神大神大神大所大所大所大所大所大所大所·1',
            position: '成都'
        },
        {
            key: '11',
            id: 11,
            phone: 32,
            name: 'John Brown',
            applied_amount: '2000',
            payback_rest: '1000',
            state: '1',
            total: '10',
            address: 'New York No. 1 Lake Parkasdadassadasdsadasdasdasdasdasdasdasd阿大神大神大神大所大所大所大所大所大所大所·1',
            position: '成都'
        },
        {
            key: '12',
            id: 12,
            phone: 32,
            name: 'John Brown',
            applied_amount: '2000',
            payback_rest: '1000',
            state: '1',
            total: '10',
            address: 'New York No. 1 Lake Parkasdadassadasdsadasdasdasdasdasdasdasd阿大神大神大神大所大所大所大所大所大所大所·1',
            position: '成都'
        },
        {
            key: '13',
            id: 13,
            phone: 32,
            name: 'John Brown',
            applied_amount: '2000',
            payback_rest: '1000',
            state: '1',
            total: '10',
            address: 'New York No. 1 Lake Parkasdadassadasdsadasdasdasdasdasdasdasd阿大神大神大神大所大所大所大所大所大所大所·1',
            position: '成都'
        },
    ];
    // const DataList = []

    const { Option } = Select;

    const setRank = (e) => {
        console.log('sadasasdas');
        console.log(e);
        switch (e) {
            case 'number':
                dispatch(OrderSortListAsync({
                    currentPage: current,
                    pageSize: pageSize
                }))
                    .then(res => {
                        console.log(res)
                        // setThisData(useSelector((state) => state.customer.obj))
                        message.success('获取成功')
                    })
                    .catch(err => {
                        console.log(err)
                        message.error(err.errMsg)
                    })
                return
            case 'money':
                dispatch(MoneySortListAsync({
                    currentPage: current,
                    pageSize: pageSize
                }))
                    .then(res => {
                        console.log(res)
                        // setThisData(useSelector((state) => state.customer.obj))
                        message.success('获取成功')
                    })
                    .catch(err => {
                        console.log(err)
                        message.error(err.errMsg)
                    })
                return
            case 'time':
                dispatch(TimeSortListAsync({
                    currentPage: current,
                    pageSize: pageSize
                }))
                    .then(res => {
                        console.log(res)
                        // setThisData(useSelector((state) => state.customer.obj))
                        message.success('获取成功')
                    })
                    .catch(err => {
                        console.log(err)
                        message.error(err.errMsg)
                    })
                return
            case 'level':
                dispatch(GradeSortListAsync({
                    currentPage: current,
                    pageSize: pageSize
                }))
                    .then(res => {
                        console.log(res)
                        // setThisData(useSelector((state) => state.customer.obj))
                        message.success('获取成功')
                    })
                    .catch(err => {
                        console.log(err)
                        message.error(err.errMsg)
                    })
                return
            default:
                return
        }

    }



    return (
        <div className={style.Management}>
            {list}
            {/* 搜索部分 */}
            {/* {SearchComponent(Search)} */}

            {/* 表格部分 */}
            <div className={style.content}>
                <div className={style.title}>
                    <h4>数据列表</h4>
                    <div className={style.titleRight}>
                        <Select className={style.titleBtn} defaultValue={'群发短信'}>
                            <Option value="selected">选中用户</Option>
                            <Option value="all">全部用户</Option>
                        </Select>
                        <Select className={style.titleBtn} defaultValue={'群发站内信'}>
                            <Option value="selected">选中用户</Option>
                            <Option value="all">全部用户</Option>
                        </Select>
                        <Select className={style.titleBtn} defaultValue={'导出数据'}>
                            <Option value="selected">选中用户</Option>
                            <Option value="all">全部用户</Option>
                        </Select>
                        <Select className={style.titleBtn} onChange={setRank} defaultValue={'排序方式'}>
                            <Option value="number">订单数量</Option>
                            <Option value="money">贷款金额</Option>
                            <Option value="time">注册时间</Option>
                            <Option value="level">会员等级</Option>
                        </Select>
                    </div>

                </div>

                {Demo(Columns, thisData, { total: count, type: true, state: false })}
                {/* {Demo(Columns, DataList, { total: DataList.length, type: true, state: false })} */}

            </div>

        </div>
    )
}
